<template>
  <div>
      <div :style="{height:getWindowHeight+'px'}">
            <cube-scroll
              ref="scrolls"
              :data="couponlist"
              :options="options"
              @pulling-up="onPullingUp"
              >
                  <div class="nav" ref="bottom_h">
                      <div class="nav_wrapper">
                          <div class="item" :class="{action : status == 0}" v-on:click="selectStatus(0)">
                              未使用
                          </div>
                          <div class="item" :class="{action : status == 1}" v-on:click="selectStatus(1)">
                              已使用
                          </div>
                          <div class="item" :class="{action : status == 2}" v-on:click="selectStatus(2)">
                              已过期
                          </div>
                      </div>
                  </div>
                  <div class="wrapper">
                      <div class="list_bg">
                          <div class="list_wrapper">
                              <couponlist :status="status"  :couponlist="couponlist"></couponlist>
                          </div>
                      </div>
                  </div>
          </cube-scroll>
      </div>
  </div>
</template>
<script>
import couponlist from '@/components/zerone/CouponListItem'
export default {
    data(){
        return{
            btn:{
                backgroundImage: "url(" + require("../../assets/page3_btn_coupon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            status:0,
            couponlist:[],
            page:1,
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '',//上拉加载更多
            pullUpLoadNoMoreTxt: '没有更多数据了喔~',
            getWindowHeight:null,
        }
    },
    metaInfo: {
      title: "优惠券列表"
    },
    methods:{
        getCouponList:function(status,that){
            const toast = that.$createToast({
                time: 1000,
                txt: ''
              })
              toast.show()
            that.$axios.post("/fang/personal/coupon_list",that.$qs.stringify({
                    access_token:that.$store.state._token01,
                    status:status,
                    page:that.page
                }))
                .then(function (response) {
                     toast.hide();
                    let res = response.data;
                    console.log(res);
                    if(res.status == 1){
                        that.status = status;
                        if(res.data.data.length > 0){
                            that.couponlist = that.couponlist.concat(res.data.data);
                            that.page = parseInt(res.data.current_page) + 1;
                        }else{
                            // 如果没有新数据
                            that.$refs.scrolls.forceUpdate();
                        }

                    }else if (res.status == -1) {
                        that.noLogin();
                    }else{
                        that.toast = that.$createToast({
                          txt: res.msg,
                          type: 'txt'
                        })
                        that.toast.show()
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    that.toast = that.$createToast({
                      txt: error.toString(),
                      type: 'txt'
                    })
                    that.toast.show()
            });
        },
        selectStatus:function(status){
            let that = this;
            if(status == this.status){
                return;
            }
            that.couponlist = [];
            that.page = 1;
            this.$options.methods.getCouponList(status,this);
        },
        onPullingUp:function(){
            let that = this;
          this.getCouponList(that.status,that);
        }
    },
    components:{
        couponlist
    },
    computed: {
        options() {
          return {
            pullUpLoad: this.pullUpLoadObj,
            scrollbar: true
          }
      },
      pullUpLoadObj: function() {
        return this.pullUpLoad  ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        } : false;
      }
    },
    mounted:function(){
        document.getElementsByTagName("body")[0].className="coupon_active_bg";
        this.getWindowHeight = (document.documentElement.clientHeight || document.body.clientHeight);
    },
    beforeCreate:function(){
        document.getElementsByTagName("body")[0].className="coupon_active_bg";
    },
    activated:function(){
        //使用keep-alive以后进入页面只会触发activated
        document.getElementsByTagName("body")[0].className="coupon_active_bg";
        this.couponlist = [];
        this.page = 1;
        this.getCouponList(this.status,this);
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","coupon_active_bg");
    },
    deactivated:function(){
        //deactivated使用keep-alive以后推出页面只会触发deactivated
        document.body.removeAttribute("class","coupon_active_bg");
    }
}
</script>
<style scoped>
.nav_wrapper{
    height: 1.76rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}
.nav_wrapper .item{
    height: 100%;
    line-height: 1.76rem;
    flex: 1;
    color: #424242;
    font-size: .56rem;
    position: relative;
}
.nav_wrapper .action{
    color: #0FB199;
    font-weight:600;
}
.nav_wrapper .action::after{
    content: "";
    display: block;
    width: 1.2rem;
    height: .08rem;
    background: #0FB199;
    border-radius: .12rem;
    position: absolute;
    left: 50%;
    bottom: .24rem;
    transform: translate(-50%,0);
}
.wrapper .list_bg .list_wrapper{
    padding: 0 .64rem;
}
</style>
